<script  lang="ts">
    import * as service from "@/api/lj_api";
    import { ref,defineExpose } from "vue";
    import { ElNotification } from 'element-plus'
    import axios from "axios";
    import type { UploadProps } from 'element-plus'
    
    
export default{
   props:['row','index'],
   setup(prop,{emit}){
        //隐藏显示
        var flag = ref(false);
        //新增左侧表单
        var ruleForm:any = ref({deviceNum:'',deviceType:'',runningTime:'',runningStatus:'',operator:'',telephone:''})
        //新增左侧表单约束
        var rules:any = {
        deviceId:{required: true, message: 'deviceId', trigger: 'bulr'},
        deviceNum:{required: true, message: 'deviceNum', trigger: 'bulr'},
        deviceType:{required: true, message: 'deviceType', trigger: 'bulr'},
        runningTime:{required: true, message: 'runningTime', trigger: 'bulr'},
        runningStatus:{required: true, message: 'runningStatus', trigger: 'bulr'},
        operator:{required: true, message: 'operator', trigger: 'bulr'},
        telephone:{required: true, message: 'telephone', trigger: 'bulr'},
        }
        //新增右侧表单
        var ruleFormRight:any =ref({position:'',localPic:'',devicePic:'',manufacturer:'',productionTime:'',productVerson:''});
        //新增右侧表单约束
        var rulesRight:any = {
        position:{required: true, message: 'position', trigger: 'bulr'},//位置
        localPic:{required: true, message: 'localPic', trigger: 'bulr'},//本地图片
        devicePic:{required: true, message: 'devicePic', trigger: 'bulr'},//设备图片
        manufacturer:{required: true, message: 'manufacturer', trigger: 'bulr'},//生产商
        productionTime:{required: true, message: 'productionTime', trigger: 'bulr'},//生产时间
        productVerson:{required: true, message: 'productVerson', trigger: 'bulr'},//产品版本
        }
        //上传照片
        var imageUrl = ref();
        const beforeUpload:UploadProps['beforeUpload']= (file,) =>{
            let fd = new FormData();
            fd.append('file',file)
            const obj = {name:file.name,file}
            axios.post('http://localhost:9000/data',fd,{
                headers:{
                    'Content-Type':'multipart/form-data'
                }
            }).then(res=>{
                console.log(res);
                // imageUrl.value = res.data;
            })
        }
        //保存
        var save = async ()=>{
          var res;
            if(prop.index == 1){
                res = await service.sixth.device_add({...ruleForm.value,...ruleFormRight.value});
            }else if(prop.index == 2){
                res = await service.sixth.devicewarn_add({...ruleForm.value,...ruleFormRight.value});
            }else{
                res = await service.sixth.devicerepair_add({...ruleForm.value,...ruleFormRight.value});
            }
          console.log(res);
          //   if(res.data)
          ElNotification.success({message: '保存成功'})
          cancel();
          //显示列表页面
          emit('hide');
          emit('getdata');
        }
        //取消-hide
        var cancel = ()=>{
            flag.value  = false; 
            emit('hide');
        }
        //隐藏-show
        var pshow = ()=>{
            flag.value  = true;
            ruleForm.value={deviceNum:'',deviceType:'',runningTime:'',runningStatus:'',operator:'',telephone:''}
            ruleFormRight.value={position:'',localPic:'',devicePic:'',manufacturer:'',productionTime:'',productVerson:''}
        }
        //回显
        var phuixian = ()=>{
            flag.value  = true;
            var  obj = prop.row;
            for(let item in ruleForm.value){
                if(obj[item] != undefined){
                    ruleForm.value[item] = obj[item];
                }
            }
            for(let item in ruleFormRight.value){
                if(obj[item] != undefined){
                    ruleFormRight.value[item] = obj[item];
                }
            }
        }
        const props  = defineExpose({
            pshow,phuixian
        })
        return {
            save,imageUrl,rulesRight,ruleFormRight,rules,ruleForm,flag,cancel,pshow,phuixian,beforeUpload
        }
   }
}
</script>
<template>
    <div class="addBtn" v-show="flag">
        <div class="addDv">
          <div class="left">
            <h3>告警处理分配：</h3>
            <el-form :rules="rules" :model="ruleForm" class="form">
              <el-form-item label="设备名称：" prop="deviceId">
                <el-input v-model="ruleForm.deviceId" />
              </el-form-item>
              <el-form-item label="设备编号：" prop="deviceNum">
                <el-input v-model="ruleForm.deviceNum" />
              </el-form-item>
              <el-form-item label="告警类型：" prop="deviceType">
                <el-select v-model="ruleForm.deviceType" placeholder="告警事件">
                  <el-option label="ISS20200816" value="1" />
                </el-select>
              </el-form-item>
              <el-form-item prop="runningTime" label="告警时间：">
                <el-date-picker v-model="ruleForm.runningTime" type="date" label="运行时间" placeholder="2022-01-23 11:21:23"
                  style="width: 100%" />
              </el-form-item>
              <el-form-item label="处置状态：" prop="runningStatus">
                <el-select v-model="ruleForm.runningStatus" placeholder="正常">
                  <el-option label="正常" value="1" />
                  <el-option label="禁用" value="0" />
                </el-select>
              </el-form-item>
              <el-form-item label="&nbsp;&nbsp;&nbsp;跟进人：" prop="operator">
                <el-input v-model="ruleForm.operator" placeholder="请输入跟进人"/>
              </el-form-item>
              <el-form-item label="联系方式：" prop="telephone">
                <el-input v-model="ruleForm.telephone" />
              </el-form-item>
            </el-form>
          </div>
          <div class="right">
            <h3>告警详细信息：</h3>
            <el-form ref="ruleFormRef" :model="ruleFormRight" :rules="rulesRight" class="form">
              <div class="top">
                  <div class="left">
                      <el-form-item label="处理结果：" prop="position" class="position">
                        <el-input v-model="ruleFormRight.position"  type="textarea"
                        placeholder="请输入处理结果"
                        rows="3" resize="none"/>
                      </el-form-item>
                  </div>
                 <div class="right">
                    <el-form-item label="现场图片：" prop="localPic">
                    </el-form-item>
                    <el-upload class="avatar-uploader"
                        action=""
                        :before-upload="beforeUpload"
                        list-type="picture"
                        >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </div>
              </div>
              <!-- 告警详细 -->
              <div class="middle">
                <div class="butt">告警详细</div>
                <div class="text">告警位置：<span>A1撞右边地面围墙</span></div>
                <div class="text">告警内容：<span>体温38.5,超阈值</span></div>
                <div class="text">告警阈值：<span>体温37~37.5</span></div>
                <div class="text">报警时间：<span>2022-02-24 13:13:58</span></div>
                <div class="text">持续时间：<span> 2022-02-24 14:14:58</span></div>
                <div class="text">告警等级：<span style="color: red;">高</span></div>
              </div>
              <!-- 设备详细 -->
              <div class="middle">
                <div class="butt twobut">设备详细</div>
                <div class="text">设备名称：<span>围墙门禁</span></div>
                <div class="text">设备型号：<span>ISIS-MJ-400</span></div>
                <div class="text">设备编号：<span>ISS20200818</span></div>
                <div class="text">设备厂家：<span>XXX怡园科技有限公司</span></div>
                <div class="text">出场时间：<span>2020-02-24 14:58</span></div>
                <div class="text">产品版本：<span>V2.3</span></div>
              </div>
            </el-form>
          </div>
        </div>
        <div class="btns">
            <el-button type="primary" size="large" class="save" @click="save">保存</el-button>
            <el-button size="large" @click="cancel">取消</el-button>
        </div>
      </div>
</template>

<style lang="scss" scoped>
@import '@/saas/Table.scss';
@import '@/saas/DeviceManager.scss';
.addBtn{
  .right{
    .form{
      display: flex;
      flex-direction: column;
      padding-bottom: 10px !important;
      .top{
        display: flex;
        .left{flex: 1;}
        .right{
          flex: 1;
          display: flex;
          :deep(.el-upload){
            margin: 0;
            .el-icon.avatar-uploader-icon{
              width: 100px;
              height: 100px;
            }
          }
        }
      }
      .middle{
        position: relative;
        font-size: 14px;
        border: 1px solid #999;
        padding: 20px 5%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-radius: 5px;
        flex: 2!important;
        margin-top: 50px;
        div{
          width: 33%;
        }
        .butt{
          width: 100px;
          line-height: 30px;
          position: absolute;
          left: 50px;
          border: 1px solid rgb(0, 191, 191);
          background: #fff;
          color: rgb(0, 191, 191);
          border-radius: 5px;
          text-align: center;
          top: -10px;
          font-size: 16px;
        }
        .butt.twobut{
            color: rgb(245, 154, 35);
            border: 1px solid rgb(245, 154, 35);
        }
      }
    }
  }
}
</style>